<template>
  <div style="min-height: calc(100vh - (80 / 1920 * 100vw));">
    <div class="site-card">
      <div class="card" v-for="(item,index) in siteList" :key="index" :style="index > 2 ? 'margin-top:calc(40/1920*100vw)' : ''">
        <div class="site-face" :style="`background-image:url(${item.siteCover})`"></div>
        <div class="site-information">
          <span class="school">{{item.siteName}}</span>
          <span class="introduce"
          >{{item.introduce}}</span
          >
          <div class="location-row">
            <img class="location-img" src="@/assets/site/location.png" alt="" />
            <span class="location-text">{{item.siteAddress}}</span>
          </div>
          <div class="detail-btn" @click="detailBtn(item)">详情</div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //跳转场地详情
    detailBtn(v){
        this.$router.push({
            path:'/siteDetail',
            query:{
              'detailContent': JSON.stringify(v)
            }
        })
    }
  },
  props: ["siteList"],
};
</script>
<style lang="scss" scoped>
.site-card {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 0px calc(30 / 1920 * 100vw);
  .card {
    width: calc(493 / 1920 * 100vw);
    display: flex;
    // border: 1px solid red;
    .site-face {
      width: calc(240 / 1920 * 100vw);
      height: calc(170 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      background-size: cover;
    }
    .site-information {
      width: calc(233 / 1920 * 100vw);
      margin-left: calc(20 / 1920 * 100vw);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .school {
        font-size: calc(16 / 1920 * 100vw);
        color: #333333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .introduce {
        font-size: calc(14 / 1920 * 100vw);
        color: #999999;
        line-height: calc(24 / 1920 * 100vw);
        overflow: hidden; //超出文本隐藏
        text-overflow: ellipsis; ///超出部分省略号显示
        display: -webkit-box; //弹性盒模型
        -webkit-box-orient: vertical; //上下垂直
        -webkit-line-clamp: 2; //自定义行数
      }
      .location-row {
        display: flex;
        align-items: center;
        .location-img {
          width: calc(11 / 1920 * 100vw);
          height: calc(14 / 1920 * 100vw);
        }
        .location-text {
          color: #666666;
          font-size: calc(14 / 1920 * 100vw);
          margin-left: calc(4 / 1920 * 100vw);
        }
      }
      .detail-btn {
        width: calc(96 / 1920 * 100vw);
        height: calc(40 / 1920 * 100vw);
        background: #fd5151;
        font-size: calc(16 / 1920 * 100vw);
        color: #fff;
        border-radius: calc(5 / 1920 * 100vw);
        text-align: center;
        line-height: calc(40 / 1920 * 100vw);
        cursor: pointer;
      }
    }
  }
}
</style>
